<template>
	<view class="container">
		<!-- 空白页 -->
		<!-- <empty v-if="loadingType === 'nomore' && groupShopList.length === 0"></empty> -->
		<view class="be">
			<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/20210113191632.png" mode=""></image>
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
			 vertical="true">
				<swiper-item v-for="item in shopList">
					<view class="swiper-item uni-bg-red bta">
						<image :src="item.avatarUrl" mode="" style="border-radius: 9999rpx;"></image>
						<view class="txt">{{ item.nickname }}下单{{item.status}}件商品</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="jmcneirong">
			<view class="kaiqing" style="width: 100%;">
				<view :class="tabyangshi" @click="benchangBtn" style="width: 100%;">
					距本场结束
					<countdown @Transmit="handle" :startTime="startTime" :endTime="enTime" />
				</view>
				<!-- <view :class="mingriyangshi" @click="mingriBtn">
					明日开抢
				</view> -->
			</view>
			<view class="" style="margin-bottom: 100rpx;">
				<view class="shujuneirong" v-for="(item, index) in groupShopList" :key="index">
					<view class="left">
						<image class="imgqing" :src="item.img" mode=""></image>
						<view class="zhezhao" v-if="item.stock == 0"><text class="name">已售空</text></view>
					</view>
					<view class="right">
						<view class="namecai">
							<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/a2dabb1dd0b14b628f73c849cd1f9f27.png" mode=""></image>

							<view class="bet">{{ item.title }}</view>
						</view>
						<view class="jindu">
							<view class="jindutiao">
								<view v-if="item.stock != 0" :class="progress" :style="{ width: (item.alreadyBuyNumber / item.stock) * 100 + '%' }">
									{{ ((item.alreadyBuyNumber / item.stock) * 100).toFixed(2) }}%
								</view>
								<view v-if="item.stock == 0" :class="progress" style="width: 100%'">100%</view>
							</view>
							<view class="namea">已秒杀{{ item.alreadyBuyNumber }}{{ item.unit }}</view>
						</view>
						<view class="xianshi">限时{{ (item.minPrice / item.originalPrice).toFixed(2) }}折</view>
						<view class="mashang">
							<view class="jiage">
								秒杀价
								<text class="biaozhi">¥</text>
								<text class="jiner">{{ (item.minPrice / 100).toFixed(2) }}</text>
							</view>
							<view class="anniu" @click="cunchu(item, index)" v-if="item.num == 0">马上秒杀</view>
							<view class="" v-else>
								<lxc-count @handleCount="handleCountClick" :index="item.id" :me="index" :value="item.num" :delayed="item.stock"></lxc-count>
							</view>
							<!-- 	<view v-if="item.stock==0" class="anniubuchong"  @click="buchongBtn(item)">
							补充中
						</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 150rpx 0rpx;" v-if="loadingType === 'nomore' && groupShopList.length === 0">
			<missing v-if="loadingType === 'nomore' && groupShopList.length === 0" :imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%203%20%E6%8B%B7%E8%B4%9D@3x.png'"
			 :desc="'暂时没有订单哦！'"></missing>
		</view>
		<view class="bottm">
			<view class="be">

			</view>
			<view class="vt" @click="goCart()">
				<!-- <image src="../../static/car.png" mode=""></image>
				 -->
				去购物车
			</view>
		</view>
	</view>
</template>

<script>
	import countdown from '@/components/cz-countdown/cz-countdown.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import missing from '@/components/missing.vue';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import lxcCount from '@/components/lxc-count/lxc-count.vue';
	// import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			missing,
			countdown,
			uniNumberBox,
			lxcCount

			// empty
		},
		data() {
			return {
				shopList: '',
				isUse: false,
				isnumber: 0,
				number: 0,
				total: 0,
				pageNo: 1,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,


				daojishidis: true,
				valueChild: '', //定义属性接收数据
				startTime: '2020-01-01 00:00:00',
				enTime: '2020-01-01 00:00:10',
				progress: 'jindushangshi',
				progressWidth: 0,
				tabyangshi: 'xuanzhogn',
				mingriyangshi: 'wixuanzhong',
				groupShopList: [],
				pageNo: 1,
				loadingType: 'more',
				mydata: [{
					name: '111',
					num: 10
				}, {
					name: '222',
					num: 20
				}, {
					name: '333',
					num: 30
				}, {
					name: '444',
					num: 40
				}, {
					name: '555',
					num: 50
				}]
			};
		},
		onLoad(options) {
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			this.loadData();
		},
		onShow() {
			var timestamp = new Date().getTime();
			this.startTime = this.formatDate(timestamp);
			console.log('当前时间', this.startTime);
			this.loadData('refresh');
			this.showAllList()
		},
		methods: {
			goCart() {
				uni.switchTab({
					url: '../cart/cart'
				})
			},
			showAllList() {
				this.$api.request('goods', 'getAllGroupMemberInfo', {}).then(res => {
					uni.hideLoading();
					// console.log(res);
					this.shopList = res.data;
				});
			},
			handleCountClick(val, index, e, y) {
				if (e == 11) {
					// console.log(this.groupShopList);
					// return
					if (this.groupShopList[y].stock == 0) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '库存不足了'
						});
						return;
					}
					this.groupShopList[y].num = val;
					this.$api
						.request('cart', 'addCartItem', {
							skuId: this.groupShopList[y].skuId,
							num: 1,
							groupShopId: this.groupShopList[y].id
						})
						.then(res => {
							uni.hideLoading();
							console.log(res);
						});
				} else {
					if (this.groupShopList[y].stock == 0) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '库存不足了'
						});
						return;
					}
					this.groupShopList[y].num = val;
					this.$api
						.request('cart', 'subCartItem', {
							skuId: this.groupShopList[y].skuId,
							num: 1,
							groupShopId: this.groupShopList[y].id
						})
						.then(res => {
							uni.hideLoading();
							console.log(res);
						});
				}
				// console.log(val, index,e,y);
				// this.mydata[index]['num'] = val;
			},
			// 子组件内部触发事件对应回调handle
			handle(val) {
				this.valueChild = val;
				console.log('时间结束');
				this.loadData('refresh');
				if (val == '时间结束') {
					this.daojishidis = false;
				}
			},

			//本场结束
			benchangBtn() {
				return;
				console.log('本场结束');
				this.tabyangshi = 'xuanzhogn';
				this.mingriyangshi = 'wixuanzhong';
			},
			//时间戳转换
			formatDate(date) {
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return YY + MM + DD + ' ' + hh + mm + ss;
			},
			//明日开枪
			mingriBtn() {
				this.mingriyangshi = 'xuanzhogn';
				this.tabyangshi = 'wixuanzhong';
			},
			buchongBtn() {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '库存补充中'
				});
			},
			cunchu(item, index) {
				if (item.stock == 0) {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '库存不足了'
					});
					return;
				}
				this.groupShopList[index].num = 1;
				this.$api
					.request('cart', 'addCartItem', {
						skuId: item.skuId,
						num: 1,
						groupShopId: item.id
					})
					.then(res => {
						uni.hideLoading();
						console.log(res);
					});
				// uni.setStorageSync('Pintuan', 1);
				// '/pages/product/detail?id='
				// uni.navigateTo({
				// 	url: '../product/detail?id=' + item.spuId + '&gid=' + item.id + '&tuangou=-1'
				// });
			},
			//获取收藏列表
			loadData(type) {
				debugger
				const that = this;
				if (type === 'refresh') {
					that.pageNo = 1;
					that.groupShopList = [];
					that.loadingType = 'more';
				}
				if (that.loadingType == 'more') {
					that.loadingType = 'loading';
					that.$api
						.request('groupshop', 'getGroupShopPage', {
							pageNo: that.pageNo,
							pageSize: 1000,
							storageId: this.$store.state.storageId
						})
						.then(res => {
							that.pageNo = res.data.pageNo + 1;
							that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'nomore';
							res.data.items.forEach(item => {
								that.groupShopList.push(item);
							});
							// console.log('结束时间',that.formatDate(res.data.items[0].gmtEnd) )
							if (res.data.items.length > 0) {
								that.enTime = that.formatDate(res.data.items[0].gmtEnd);
							}

							if (type === 'refresh') {
								uni.stopPullDownRefresh();
							}
						});
				}
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.container {
		padding-bottom: 134upx;

		.jmcneirong {
			margin-top: 16rpx;
			width: 750rpx;

			.shujuneirong {
				width: 694rpx;
				height: 260rpx;
				background-color: #ffffff;
				margin-left: 28rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					margin-right: 10rpx;

					.xianshi {
						width: 140rpx;
						margin-top: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 40rpx;
						background: #e0eee0;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #36b542;
					}

					.mashang {
						margin-top: 10rpx;
						height: 64rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.anniubuchong {
							width: 140rpx;
							height: 64rpx;
							background: #c0c4cc;
							border-radius: 4rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}

						.anniu {
							width: 140rpx;
							height: 64rpx;
							background: #36b542;
							border-radius: 4rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}

						.jiage {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #e02020;

							.jiner {
								font-size: 48rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 600;
								color: #e02020;
							}

							.biaozhi {
								font-size: 24rpx;
								margin-left: 14rpx;
							}
						}
					}

					.jindu {
						margin-top: 10rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.namea {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						.jindutiao {
							width: 252rpx;
							height: 32rpx;
							background: #9adaa0;
							border-radius: 16rpx;
							margin-right: 16rpx;
							position: relative;
							overflow: hidden;
							text-align: center;

							font-size: 20rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 500;
							color: #ffffff;

							.jindushangshi {
								position: absolute;
								width: 100%;
								height: 32rpx;
								background-color: #36b542;
								// z-index: 9;
								line-height: 35rpx;
								text-align: center;
								font-size: 20rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #ffffff;
								border-radius: 16rpx;
							}
						}
					}

					.namecai {
						overflow: hidden;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #333333;
						display: flex;
						align-items: center;

						.bet {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 350rpx;
						}

						image {
							margin-right: 20rpx;
							width: 60rpx;
							height: 30rpx;
						}
					}
				}

				.left {
					display: flex;
					align-items: center;
					position: relative;

					.zhezhao {
						position: absolute;
						left: 10rpx;
						top: 0;
						width: 240rpx;
						height: 240rpx;
						background-color: #000000;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						.name {
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #ffffff;
						}
					}

					.imgqing {
						margin-left: 10rpx;
						width: 240rpx;
						height: 240rpx;
					}
				}
			}

			.kaiqing {
				width: 100%;
				padding-left: 28rpx;
				padding-right: 28rpx;
				height: 82rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.wixuanzhong {
					width: 346rpx;
					height: 82rpx;
					background: #f2f2f2;
					border-radius: 0px 4rpx 0px 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #36b542;
				}

				.xuanzhogn {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #36b542;
					width: 346rpx;
					height: 82rpx;
					background: #ffffff;
					border-radius: 4rpx 0px 0px 0px;
				}
			}
		}

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	/* 收藏列表项 */
	.favorite-item {
		display: flex;
		position: relative;
		padding: 30upx 40upx;

		.image-wrapper {
			width: 230upx;
			height: 230upx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 8upx;
			}
		}

		.checkbox {
			position: absolute;
			left: -16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30upx;

			.title,
			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}

			.attr {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
			}

			.pro-box {
				display: flex;
				align-items: center;
				margin-top: 10upx;
				font-size: $font-sm;
				color: $font-base;
				padding-right: 10upx;

				.progress-box {
					flex: 1;
					border-radius: 10px;
					overflow: hidden;
					margin-right: 8upx;
				}
			}

			.price {
				height: 50upx;
				line-height: 50upx;
			}
		}
	}

	.be {
		height: 48rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}

		.swiper {
			height: 100%;
			flex: 1;
			align-items: center;

			.swiper-item {
				height: 100%;
			}

			.bta {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				font-size: 26rpx;

				font-weight: 400;
				color: #36b542;
			}
		}
	}

	.bottm {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		// padding: 0 30rpx;
		box-sizing: border-box;

		.be {
			flex: 1;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.vt {
			font-size: 26rpx;
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
			background-color: #36b542;
			// text-align: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}
</style>
